<template>
  <h1>销售出库</h1>
  <el-row>
    <el-col :span="10">
      <span>客户&nbsp;&nbsp;&nbsp;</span>
      <el-select v-model="clientName">
        <el-option
            v-for="item in selectOptionsAll"
            :key="item.clientId"
            :label="item.clientName"
            :value="item.clientName">
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="5">
      <span>销售员&nbsp;&nbsp;&nbsp;{{ saleName }}</span>
    </el-col>
    <el-col :span="9">
      <span>订单总额&nbsp;&nbsp;&nbsp;</span>{{totalPrice}}
    </el-col>
  </el-row>
  <el-row style="margin-top: 20px;margin-bottom: 50px">
    <el-col :span="2"><span>送货地址</span></el-col>
    <el-col :span="22">
      <el-form :model="saleForm" ref="saleForm" :rules="rules">
        <el-form-item prop="saleAddress">
          <el-input v-model="saleForm.saleAddress" style="width: 210px"></el-input>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
<span>出库物品</span>
  <el-table :data="saleCartList" stripe>
    <el-table-column prop="goodsName" label="商品名称"></el-table-column>
    <el-table-column prop="goodsBrand" label="品牌"></el-table-column>
    <el-table-column prop="salePrice" label="建议销售价"></el-table-column>
    <el-table-column prop="saleNo" label="出库数量">
      <template #default="scope">
        <el-input-number :min="1" v-model="scope.row.saleNo" @change="updateSaleCart(scope.row)"></el-input-number>
      </template>
    </el-table-column>
    <el-table-column label="移除商品">
      <template #default="scope">
        <el-button type="danger" @click="remove(scope.row.salecartId)">移除商品</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-button type="primary" @click="addDialog">添加商品</el-button>
  <el-button type="primary" @click="chuku">出库</el-button>
  <el-dialog v-model="dialogVisible" title="添加采购商品" width="50%">
     <el-table :data="goodsList" stripe>
       <el-table-column prop="goodsName" label="商品名称"></el-table-column>
       <el-table-column prop="goodsBrand" label="品牌"></el-table-column>
       <el-table-column prop="salePrice" label="建议销售价"></el-table-column>
       <el-table-column label="添加">
         <template #default="scope">
           <el-button type="primary" @click="addIntoCart(scope.row)">添加</el-button>
         </template>
       </el-table-column>
     </el-table>
    <el-pagination v-model:current-page="curPage" v-model:page-size="pageSize" background
                   :total="total" @current-change="reload"></el-pagination>
    <div>
      <span>商品名称&nbsp;&nbsp;&nbsp;</span>
      <el-input v-model="goodsName"></el-input>
      <el-select v-model="goodsType">
        <el-option label="电脑产品" value="1"></el-option>
        <el-option label="安防产品" value="2"></el-option>
        <el-option label="办公耗材" value="3"></el-option>
      </el-select>
      <el-button type="primary" @click="addDialog">查询</el-button>
    </div>


  </el-dialog>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  created() {
    axios.post("/api/client/findAllClients", null).then(response => {
      this.selectOptionsAll = response.data;
      this.clientName = this.selectOptionsAll[0].clientName;
      this.reload();
      this.saleName = localStorage.getItem("userName");
    })
  },
  name: "Sale",
  data() {
    return {
      clientName: '',
      selectOptionsAll: [],
      saleName: '',
      saleForm:{},
      saleCartList:[],
      dialogVisible:false,
      goodsList:[],
      curPage:1,
      pageSize:4,
      total:0,
      goodsType:"1",
      goodsName:'',
      totalPrice:0,
      rules:{
        saleAddress:[{required:true,message:'请输入送货地址',trigger:'blur'}]
      }
    }
  },
  methods:{
    remove(saleCartId){
      let param = new URLSearchParams();
      param.append("saleCartId",saleCartId)
      axios.post("/api/saleCart/removeSaleCart",param).then(response=>{
        if (response.data=='success'){
          this.reload();
        }
      })
    },
    updateSaleCart(row){
      axios.post("/api/saleCart/modifySaleCart",row).then(response=>{
         if (row.saleNo>response.data){
           ElMessage.error("库存数量不足，库存数量为"+response.data);
         }
        this.reload();
      })
},
    addDialog(){
      let param =new URLSearchParams();
      param.append("pageNo",this.curPage);
      param.append("pageSize",this.pageSize);
      param.append("goodsName",this.goodsName);
      param.append("goodsType",this.goodsType);
      axios.post("/api/goods/findOutGoodsByPage",param).then(response=>{
        let data =response.data;
        this.goodsList = data.records;
        this.total = data.total;
        this.dialogVisible =true;
      })
    },
    addIntoCart(row){
        axios.post("/api/saleCart/addIntoCart",row).then(response=>{
           if (response.data=='success'){
             this.reload();
             this.dialogVisible = false;
           }else {
             ElMessage.error("库存数量不足");
           }
        })
    },
    countTotal(){
        this.totalPrice = 0;
        this.saleCartList.forEach(c => {
        this.totalPrice += c.salePrice * c.saleNo
      })
    },
    chuku(){
      this.$refs.saleForm.validate((valid) => {
        if (valid) {
          let param = new URLSearchParams();
          param.append("clientName",this.clientName);
          param.append("saleName",this.saleName);
          param.append("saleTotal",this.totalPrice);
          param.append("saleAddress",this.saleForm.saleAddress);
          axios.post("/api/goods/outbound",param).then(response=>{
            if (response.data=='success'){
              ElMessage.success("出库成功");
              this.reload();
            }
          })
        }else {
          ElMessage.error("请输入送货地址")
        }
      });

    },
    reload(){
      axios.post("/api/saleCart/findSaleCarts",null).then(response=>{
        this.saleCartList = response.data;
        this.countTotal();
      })

    }
  }
}
</script>

<style scoped>

</style>